<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>后台管理系统-保理软件</title>
    <meta name="keywords" content="保理软件,保理产品"/>
    <meta name="description" content="设置描述..."/>
    <meta name="author" content="DeathGhost"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <!--产品logo-->
    <link rel="icon" href="images/icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/Ztree.css"/>
    <!--jQuery v3.2.1-->
    <script src="javascript/jquery.js"></script>
    <!--jquery.easyui v1.3.4-->
    <script src="javascript/jquery.easyui.min.js"></script>
    <!--滚动插件-->
    <script src="javascript/plug-ins/customScrollbar.min.js"></script>
    <!--统计插件-->
    <script src="javascript/plug-ins/echarts.min.js"></script>
    <!--弹框插件-->
    <script src="javascript/plug-ins/layerUi/layer.js"></script>
    <!--日历日期插件-->
    <script src="javascript/laydate/laydate.js"></script>
    <!--HTML编辑器插件-->
    <script src="editor/ueditor.config.js"></script>
    <!--HTML编辑器插件-->
    <script src="editor/ueditor.all.js"></script>
    <!--分页插件-->
    <script src="javascript/plug-ins/pagination.js"></script>
    <!--整个模板样式控制文件-->
    <script src="javascript/public.js"></script>
    <style>
        .form-group-col-2 {
            width: 50%;
            float: left;
            margin-bottom: 5px;
        }
        .form-group-col-2 .form-label {
            padding: 3px 0px !important;
            font-size: 12px !important;
            width: 115px;
            font-weight: bolder;
            cursor: pointer;
        }

        .form-group-col-2 .form-cont {
            margin-left: 125px;
            min-height: 33px;
        }

        .form-control {
            font-size: 12px !important;
            padding: 4px 15px !important;
        }
        .serial-number ul li{
            cursor: pointer;
        }



        .tree {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .tree li {
            white-space: nowrap;
        }
        .tree li ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .tree-node {
            height: 18px;
            white-space: nowrap;
            cursor: pointer;
        }
        .tree-hit {
            cursor: pointer;
        }
        .tree-expanded,
        .tree-collapsed,
        .tree-folder,
        .tree-file,
        .tree-checkbox,
        .tree-indent {
            display: inline-block;
            width: 16px;
            height: 18px;
            vertical-align: top;
            overflow: hidden;
        }
        .tree-expanded {
            background: url('images/tree_icons.png') no-repeat -18px 0px;
        }
        .tree-expanded-hover {
            background: url('images/tree_icons.png') no-repeat -50px 0px;
        }
        .tree-collapsed {
            background: url('images/tree_icons.png') no-repeat 0px 0px;
        }
        .tree-collapsed-hover {
            background: url('images/tree_icons.png') no-repeat -32px 0px;
        }
        .tree-lines .tree-expanded,
        .tree-lines .tree-root-first .tree-expanded {
            background: url('images/tree_icons.png') no-repeat -144px 0;
        }
        .tree-lines .tree-collapsed,
        .tree-lines .tree-root-first .tree-collapsed {
            background: url('images/tree_icons.png') no-repeat -128px 0;
        }
        .tree-lines .tree-node-last .tree-expanded,
        .tree-lines .tree-root-one .tree-expanded {
            background: url('images/tree_icons.png') no-repeat -80px 0;
        }
        .tree-lines .tree-node-last .tree-collapsed,
        .tree-lines .tree-root-one .tree-collapsed {
            background: url('images/tree_icons.png') no-repeat -64px 0;
        }
        .tree-line {
            background: url('images/tree_icons.png') no-repeat -176px 0;
        }
        .tree-join {
            background: url('images/tree_icons.png') no-repeat -192px 0;
        }
        .tree-joinbottom {
            background: url('images/tree_icons.png') no-repeat -160px 0;
        }
        .tree-folder {
            background: url('images/tree_icons.png') no-repeat -208px 0;
        }
        .tree-folder-open {
            background: url('images/tree_icons.png') no-repeat -224px 0;
        }
        .tree-file {
            background: url('images/tree_icons.png') no-repeat -240px 0;
        }
        .tree-loading {
            background: url('images/loading.gif') no-repeat center center;
        }
        .tree-checkbox0 {
            background: url('images/tree_icons.png') no-repeat -208px -18px;
        }
        .tree-checkbox1 {
            background: url('images/tree_icons.png') no-repeat -224px -18px;
        }
        .tree-checkbox2 {
            background: url('images/tree_icons.png') no-repeat -240px -18px;
        }
        .tree-title {
            font-size: 12px;
            display: inline-block;
            text-decoration: none;
            vertical-align: top;
            white-space: nowrap;
            padding: 0 2px;
            height: 18px;
            line-height: 18px;
        }
        .tree-node-proxy {
            font-size: 12px;
            line-height: 20px;
            padding: 0 2px 0 20px;
            border-width: 1px;
            border-style: solid;
            z-index: 9900000;
        }
        .tree-dnd-icon {
            display: inline-block;
            position: absolute;
            width: 16px;
            height: 18px;
            left: 2px;
            top: 50%;
            margin-top: -9px;
        }
        .tree-dnd-yes {
            background: url('images/tree_icons.png') no-repeat -256px 0;
        }
        .tree-dnd-no {
            background: url('images/tree_icons.png') no-repeat -256px -18px;
        }
        .tree-node-top {
            border-top: 1px dotted red;
        }
        .tree-node-bottom {
            border-bottom: 1px dotted red;
        }
        .tree-node-append .tree-title {
            border: 1px dotted red;
        }
        .tree-editor {
            border: 1px solid #95B8E7;
            font-size: 12px;
            line-height: 16px;
            padding: 0 4px;
            margin: 0;
            width: 80px;
            outline-style: none;
            vertical-align: top;
            position: absolute;
            top: 0;
        }
        .tree-node-proxy {
            background-color: #ffffff;
            color: #000000;
            border-color: #95B8E7;
        }
        .tree-node-hover {
            background: #eaf2ff;
            color: #000000;
        }
        .tree-node-selected {
            background: #ffe48d;
            color: #000000;
        }
        .tree-node-hidden {
            display: none;
        }


    </style>
</head>
<body>
<!--软件主体内容-->
<main class="content clear">
    <!--开始::内容-->
    <div class="page-wrap">
        <!--面包屑-->
        <section class="page-hd page-hd-top">
            <div class="breadcrumb">
                <ul>
                    <li>基础信息维护<i class="icon-angle-right"></i></li>
                    <li>财务及交易信息维护<i class="icon-angle-right"></i></li>
                    <li>新增财务及交易信息</li>
                </ul>
            </div>
        </section>
    </div>
    <div class="page-wrap">
        <div class="panel panel-default">
            <div class="panel-bd">
                <fieldset class="field-title center">
                    <legend>树</legend>
                </fieldset>
            </div>
        </div>
    </div>
    <div class="page-wrap">
        <ul class="flex flex-nowrap">
            <li class="box-child"></li>
            <li class="box-child">
                <ul id="demo" class="layui-tree layui-show">
                    <li>
                        <i class="icon-caret-down"></i>
                        <input type="checkbox" />
                        <a href="javascript:void(0);">
                            我的邮箱11
                        </a>
                        <ul class="layui-show">
                            <li data-spread="true">
                                <i class="icon-caret-down"></i>
                                <input type="checkbox" />
                                <a href="javascript:void(0);">
                                    QQ邮箱
                                </a>
                                <ul class="layui-show">
                                    <li data-spread="true">
                                        <i class="icon-caret-down"></i>
                                        <input type="checkbox" />
                                        <a href="javascript:void(0);">
                                            收件箱
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="box-child"></li>
        </ul>
        <ul id="tt" class="easyui-tree" data-options="
				url: 'tree_data1.json',
				method: 'get',
				checkbox:true,
				cascadeCheck:true,
				onlyLeafCheck:true,
				lines:true,
				onClick: function(node){
                    console.log(node);  // alert node text property when clicked
                }
			"></ul>

    </div>
    <!--开始::结束-->
</main>
<script>
    $('.icon-caret-down,.icon-caret-right').on('click',function(){
        $(this).toggleClass('icon-caret-down icon-caret-right');
        $(this).parent().find('ul').toggleClass('layui-show')
    })
    $(".layui-show>li>a").on('click',function(){
        var thisC = $(this).prev();
       if(thisC.is(":checked")) {
           $(this).prev().prop("checked",false);
            console.log('222')
        }else{
           $(this).prev().prop("checked",true);
            console.log('111')
        }
    })
</script>
</body>
</html>
